<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>趣味琴谱</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/jquery-3.5.0.min.js"></script>
</head>

<body>
    <div style="height: 50px;"></div>
    <img src="" id="qinpu">
    <div class="box">
        <ul id="box">
            <li>两只老虎</li>
            <li>轨迹</li>
            <li>小星星</li>
            <li>粉刷匠</li>
            <li>新年好</li>
            <li>找朋友</li>
            <li>世上只有</li>
            <li>青花瓷</li>
        </ul>
        <span id="start"></span>
    </div>
    <ul id="piano">
        <li>do<div></div></li>
        <li>re<div></div></li>
        <li>mi</li>
        <li>fa<div></div></li>
        <li>sol</li>
        <li>la<div></div></li>
        <li>si<div></div></li>
        <li>do</li>
    </ul>
    <audio src="./mp3/1do.mp3"></audio>
    <audio src="./mp3/2re.mp3"></audio>
    <audio src="./mp3/3mi.mp3"></audio>
    <audio src="./mp3/4fa.mp3"></audio>
    <audio src="./mp3/5so.mp3"></audio>
    <audio src="./mp3/6la.mp3"></audio>
    <audio src="./mp3/7si.mp3"></audio>
    <audio src="./mp3/8do.mp3"></audio>

    <script>
        var mp3 = document.getElementsByTagName("audio");
        $("#start").mousedown(function(){
            $(this).css("filter","brightness(50%)");
        })
        var num = 0;
        $("#start").mouseup(function(){
            $(this).css("filter","brightness(100%)");
            var times = parseInt(Math.random() * 16) + 9;
            clearInterval(timer);
            console.log(times)
            var timer = setInterval(function () {
                times--;
                if (times <= 0) {
                    clearInterval(timer);
                    var path = "./images/" + $("#box>li").eq(num).html() + ".png";
                    $("#qinpu").attr("src",path);
                    // 延时器
                    setTimeout(function () {
                        $("#qinpu").css("display","block");
                    }, 500)
                }
                if (num >= $("#box>li").length) num = 0;
                $("#box>li").eq(num).css("filter","brightness(50%)").siblings().css("filter","brightness(100%)");
                num++;
            }, 100)
        })

        $("#qinpu").click(function(){
            $(this).css("display","none");
        })

        $("#piano>li").mousedown(function(event){
            let x = $(this).index();
            $(this).css("color","blue").siblings().css("color","black");
            $("audio")[x].play()
        }) 
        $("#piano>li").mouseup( function () {
            let x = $(this).index();
            $("audio")[x].currentTime = 0;
            $("audio")[x].pause();
        })


        window.onkeydown = function (event) {   
            for(i=49;i<=56;i++){
                if(event.keyCode == i) $("audio")[i-49].play();
            }
        }
        window.onkeyup = function(event){
            for(i=49;i<=56;i++){
                if(event.keyCode == i){
                    $("audio")[i-49].currentTime = 0;
                    $("audio")[i-49].pause();
                }
            }
        }
        

        


    </script>
</body>

</html>